<script setup lang="ts">
import { ref, reactive, defineAsyncComponent, onMounted, inject, watch } from "vue";
import { getAssetsFile } from "@visual/utils";
import { eventBus } from "@/views/all/visual/template/utils/eventBus";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { queryEqpExtendInfo } from "@/api/visual/visualConfig";
import { useRouter } from "vue-router";
import { getToken } from "@/utils/auth";

const positionCode = inject("positionCode", ref(""));
const facCode = inject("facCode", ref(""));
const routerParams = ref({
  eqpId: null,
  eqpName: null,
  maintenanceStatus: null,
  maintenanceStatusDesc: null,
  maintenanceId: null,
  workOrderCode: null,
  inspectTaskStatus: null,
  inspectTaskStatusDesc: null,
  inspectTaskId: null,
  jobId: null,
  jobStatus: null,
  jobStatusDesc: null,
  pmType: null
});
const router = useRouter();

defineOptions({
  name: "equipRouter"
});
const isCollapsed = ref(false);
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      collapsed?: boolean;
      iconName?: string;
    };
  }>(),
  {
    propValue: () => ({
      contentList: [],
      title: "",
      collapsed: false,
      iconName: "alert"
    })
  }
);
let compArr = ["posfix", "posinspection", "posmaintian"];
const imgLabel = {
  posfix: "今日设备维修",
  posinspection: "今日设备巡检",
  posmaintian: "今日设备保养"
};
const imgArr = ref([]);
watch(
  [facCode, positionCode],
  val => {
    const [factoryId, eqpId] = val;
    if (factoryId && eqpId) {
      getRouters(factoryId, eqpId);
    }
  },
  { immediate: true }
);
async function getRouters(factoryId, eqpId) {
  /**
      eqpId	设备id	string
      eqpName	设备名称	string
      maintenanceStatus	维修状态	integer(int32)
      maintenanceStatusDesc	维修状态描述	string
      maintenanceId	维修工单id	integer(int64)
      workOrderCode	维修工单编号	string
      inspectTaskStatus	巡检任务状态	integer(int32)
      inspectTaskStatusDesc	巡检任务状态	integer(int32)
      inspectTaskId	巡检任务id	integer(int64)
      jobId	保养任务id	string
      jobStatus	保养任务状态	string
      jobStatusDesc	保养任务状态	string
      pmType	保养类型	string
   */
  const res = await queryEqpExtendInfo({ factoryId, eqpId });
  if (res) {
    routerParams.value = res as any;
    const {
      eqpId,
      eqpName,
      maintenanceStatus,
      maintenanceStatusDesc,
      maintenanceId,
      workOrderCode,
      inspectTaskStatus,
      inspectTaskStatusDesc,
      inspectTaskId,
      jobId,
      jobStatus,
      jobStatusDesc,
      pmType
    } = res;
    for (let item of compArr) {
      let status, type, query, jumpePath;
      //维修
      if (item === "posfix") {
        status = maintenanceStatusDesc;
        jumpePath = `/all/equip/maintain/task?id=${maintenanceId}&workOrderCode=${workOrderCode}&status=${maintenanceStatus}&type=view`;
      }
      //巡检
      if (item === "posinspection") {
        status = inspectTaskStatusDesc;
        jumpePath = `/all/equip/inspect/task?taskCode=${inspectTaskId}`;
      }
      //保养
      if (item === "posmaintian") {
        status = jobStatusDesc;
        jumpePath = `/all/equip/epm/task/list`;
        query = {
          fullpath: `/pmJob/list?jobId=${jobId}&jobStatus=${jobStatus}&pmType=${pmType}&status=${jobStatus}&ssoToken=${getToken().accessToken}&isHiddenMenu=true`
        };
      }
      imgArr.value.push({
        rawName: item,
        name: `m${item}`,
        label: imgLabel[item],
        status: status ? status : "无任务",
        type: status ? "primary" : "",
        tagType: status ? "warning" : "gray",
        canJump: status ? true : false,
        jumpePath: jumpePath,
        query
      });
    }
  }
}

const routerToRecord = () => {
  const { eqpId, eqpName } = routerParams.value;
  if (eqpId && eqpName) {
    router.push(`/all/equip/runManage/status?id=${eqpId}`);
  }
};
const routerToPage = item => {
  const { jumpePath, query } = item;
  if (query) {
    router.push({ path: jumpePath, query });
  } else {
    router.push(jumpePath);
  }
};
</script>

<template>
  <leftCompWrapper v-model="isCollapsed" :title="propValue.title" :icon-name="propValue.iconName" :has-collapsed="propValue.collapsed">
    <div v-if="isCollapsed || !propValue.collapsed" class="list-warpper">
      <px-button class="mt-[16px]" type="primary" @click="routerToRecord">设备历史数据查看</px-button>
      <div v-for="(item, index) in imgArr" :key="index" class="list-item">
        <div class="list-item-label">
          <img class="w-[20px] h-[27px] mr-[16px]" :src="getAssetsFile(item.name)" />
          <span>{{ item.label }}</span>
        </div>
        <px-tag class="shrink-0" :type="item.tagType">{{ item.status }}</px-tag>
        <px-button class="shrink-0" text :type="item.type" :disabled="!item.canJump" @click="routerToPage(item)"> 详情 </px-button>
      </div>
    </div>
  </leftCompWrapper>
</template>
<style lang="scss" scoped>
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;

  &-label {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: center;
  }
}
</style>
